<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>后台登陆</title>
    <base href="${basePath}">
    <link rel="stylesheet" href="static/plugins/layui/css/layui.css">
    <script src="static/plugins/jquery-3.1.0.js"></script>
    <script src="static/plugins/layui/layui.js"></script>
    <script src="static/plugins/echarts/echarts.js"></script>
    <style>
        .layui-row {
            background-color: #eee;
        }

        .echarts-content {
            height: 300px;
            background-color: #fff;
        }
    </style>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-row layui-col-space16">
            <div class="layui-col-md12">
                <div class="echarts-content" id="line"></div>
            </div>
            <div class="layui-col-md6">
                <div class="echarts-content" id="bar"></div>
            </div>
            <div class="layui-col-md6">
                <div class="echarts-content" id="pie"></div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        setLineEcharts();
        setBarEcharts();
        setPieEcharts();
    })

    function setLineEcharts() {
        const line = document.getElementById("line");
        const lineEcharts = echarts.init(line);
        lineEcharts.setOption({
            title: {
                text: "每月申请量",
                left: "center",
                top: "10",
            },
            tooltip: {
                trigger: "axis"
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260, 165, 222, 123, 154, 258],
                    type: 'line'
                }
            ]
        })
    }

    function setBarEcharts() {
        const bar = document.getElementById("bar");
        const barEcharts = echarts.init(bar);
        barEcharts.setOption({
            title: {
                text: "部门当月申请量",
                left: "center",
                top: "10",
            },
            tooltip: {
                trigger: "axis"
            },
            xAxis: {
                type: 'category',
                data: ['研发部', '测试部', '销售部', '市场部']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [15, 25, 18, 30],
                    type: 'bar'
                }
            ]
        })
    }

    function setPieEcharts() {
        const pie = document.getElementById("pie");
        const pieEcharts = echarts.init(pie);
        pieEcharts.setOption({
            title: {
                text: '车辆借用次数',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '借用次数',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: 35, name: '苏A12345'},
                        {value: 22, name: '苏B54321'},
                        {value: 58, name: '苏C88888'},
                        {value: 48, name: '苏C66666'},
                        {value: 10, name: '京A00000'}
                    ]
                }
            ]
        })
    }
</script>
</html>
